<template>
  <view :style="[styles]" class="content">
    <text class="title" :style="{ color: attribute.titleColor }">{{
      attribute.title
    }}</text>
    <span class="red-dot" v-if="attribute.required">*</span>
    <view class="checkbox-group">
      <u-checkbox-group
        :activeColor="attribute.checkboxGroupProps.activeColor"
        :placement="attribute.checkboxGroupProps.placement"
        v-model="attribute.value"
        @change="validate"
      >
        <view
          class="checkbox-item"
          v-for="item in attribute.options"
          :key="item.name"
        >
          <u-checkbox :label="item.label" :name="item.name"> </u-checkbox>
        </view>
      </u-checkbox-group>
    </view>
    <view class="input-rule-text" v-if="requiredFail">{{
      attribute.requiredText
    }}</view>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";

export default {
  name: `${COMPREIFX}cus-checkbox`,
  props: {
    attribute: Object,
    styles: Object,
  },
  data() {
    return {
      requiredFail: false,
    };
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$nextTick(() => {
          if (this.attribute.required && !!!this.attribute.value.length) {
            this.requiredFail = true;
            resolve(this.attribute.requiredText);
            return false;
          }
          this.requiredFail = false;
          resolve();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 15rpx 20rpx;
}

.title {
  color: #333;
  font-size: 28rpx;
}

.red-dot {
  color: rgb(245, 39, 39);
  margin-left: 5rpx;
}

.checkbox-group {
  margin-top: 30rpx;
}

.checkbox-item {
  margin-bottom: 26rpx;

  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}

.input-rule-text {
  color: #f05357;
  font-size: 24rpx;
  padding: 15rpx 18rpx;
}
</style>
